<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player</title>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../assets/css/musicplayer.css">
</head>

<body>
    


    <div class="app">
        <div class="header">
            <h1>Tap Music</h1>
            <p>Make beautiful music with a single tap</p>
            <section>
                <div class="loader">
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
        
                </div>
            </section>
                

        </div>
        <div class="visual"></div>
        <div class="pads">
            <div class="pad-1">
                <audio class="sound" src="../assets/sounds/bubbles.mp3"></audio>
            </div>
            <div class="pad-2">
                <audio class="sound" src="../assets/sounds/clay.mp3"></audio>
            </div>
            <div class="pad-3">
                <audio class="sound" src="../assets/sounds/confetti.mp3"></audio>
            </div>
            <div class="pad-4">
                <audio class="sound" src="../assets/sounds/glimmer.mp3"></audio>
            </div>
            <div class="pad-5">
                <audio class="sound" src="../assets/sounds/moon.mp3"></audio>
            </div>
            <div class="pad-6">
                <audio class="sound" src="../assets/sounds/ufo.mp3"></audio>
            </div>
        </div>
        
    

    </div>

    <script src="../assets/js/musicplayer.js"></script>
</body>

</html>
